<template>
  <div>
    <el-container>
      <el-main style="padding-left: 0px;padding-top: 10px">
        <div style="padding-left: 0px;padding-top: 10px">
          <el-card style="margin-bottom: 20px">
            <el-row>
              <el-col :span="8">
                <el-card style="margin-bottom: 20px;width: 600px;">
                  <div id="mychart" style="width: 600px;height:400px;"></div>
                </el-card>
              </el-col>
              <el-col :span="8" :offset="5">
                <el-card :body-style="{padding: '0px' }"
                         style="margin-bottom: 20px; margin-top: 30px; margin-left: 100px;width: 300px;">
                  <div class="card-panel-icon-wrapper icon-people">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-ruzhiguanli"></use>
                    </svg>
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      总调入人数
                    </div>
                    <count-to :start-val="9280" :end-val="allJoinCount" :duration="3200" class="card-panel-num"/>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8" :offset="5">
                <el-card :body-style="{padding: '0px' }" style="margin-top: 100px;margin-left: 100px;width: 300px;">
                  <div class="card-panel-icon-wrapper icon-people">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-lizhishenqing"></use>
                    </svg>
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      总调出人数
                    </div>
                    <count-to :start-val="9280" :end-val="allLeaveCount" :duration="3200" class="card-panel-num"/>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <div style="margin-bottom: 5px">
              <el-input
                prefix-icon="el-icon-search"
                clearable
                placeholder="请输入员工工号或者姓名..."
                style="width: 300px;"></el-input>
              <el-date-picker
                v-model="year"
                type="year"
                placeholder="请选择年份">
              </el-date-picker>
              <el-button type="primary">确定</el-button>
            </div>
            <el-card style="margin-bottom: 20px;width: 100%;">
              <div id="mychart1" style="width: 100%;height:600px;"></div>
            </el-card>
            <el-table
              border
              :data="salaries"
              stripe
              v-loading="tableLoading"
              size="mini"
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column type="selection" width="30"></el-table-column>
              <el-table-column
                min-width="20%"
                prop="depName"
                align="center"
                label="部门名称">
              </el-table-column>
              <el-table-column
                min-width="20%"
                prop="peopleCount"
                align="center"
                label="部门人数">
              </el-table-column>
              <el-table-column
                align="center"
                prop="joinCount"
                min-width="20%"
                label="调入人数">
                <template slot-scope="scope" style="text-align: center;">
                  <el-tag size="small" effect="dark" type="success">{{ scope.row.joinCount }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="leaveCount"
                min-width="20%"
                label="调出人数">
                <template slot-scope="scope" style="text-align: center;">
                  <el-tag size="small" effect="dark" type="danger">{{ scope.row.leaveCount }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
import * as echarts from "echarts";

export default {
  components: {
    CountTo
  },
  data() {
    return {
      year: '',
      dialogVisible: false,
      tableLoading: false,
      index: 0,
      salaries: [],
      allJoinCount: 0,
      allLeaveCount: 0,
      multipleSelection: [],
      salary: {
        id: '',
        depName: '',
        peopleCount: '',
        joinCount: '',
        leaveCount: ''
      }
    };
  },
  methods: {
    // 初始化图表
    initEcharts() {
      console.log(this.salaries);
      const joinCount = [];
      const leaveCount = [];
      for (let i = 0; i < this.salaries.length; i++) {
        joinCount.push(this.salaries[i].joinCount);
        leaveCount.push(this.salaries[i].leaveCount);
        this.allJoinCount += this.salaries[i].joinCount;
        this.allLeaveCount += this.salaries[i].leaveCount;
      }
      console.log(joinCount);
      console.log(leaveCount);
      const option = {
        title: {
          text: '调动信息雷达图'
        },
        legend: {
          data: ['调入人数', '调出人数']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: '股东会', max: 5},
            {name: '董事会', max: 5},
            {name: '总办', max: 5},
            {name: '财务部', max: 5},
            {name: '市场部', max: 5},
            {name: '华北市场部', max: 5},
            {name: '华南市场部', max: 5},
            {name: '石家庄市场部', max: 5},
            {name: '西北市场部', max: 5},
            {name: '西安市场', max: 5},
            {name: '莲湖区市场', max: 5},
            {name: '技术部', max: 5},
            {name: '运维部', max: 10},
          ]
        },
        series: [
          {
            name: '调入 vs 调出',
            type: 'radar',
            data: [
              {
                value: joinCount,
                name: '调入人数'
              },
              {
                value: leaveCount,
                name: '调出人数'
              }
            ]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mychart'));// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEcharts1() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '员工[王川]本月薪资',
            type: 'bar',
            barWidth: '60%',
            data: [13400, 13400, 13400, 12188, 12188, 13400, 13400, 13400, 13400, 13400, 13400, 13400]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mychart1'));// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    deleteAll() {
      this.$confirm('删除[' + this.multipleSelection.length + ']条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = '';
        this.multipleSelection.forEach(row => {
          ids = ids + row.id + ",";
        })
        this.doDelete(ids);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      row.createDate = new Date(row.createDate);
      this.salary = row;
    },
    handleDelete(index, row) {
      this.$confirm('删除[' + row.name + ']账套, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(row.id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    doDelete(id) {
      var _this = this;
      _this.tableLoading = true;
      this.deleteRequest("/salary/sob/salary/" + id).then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status == 200) {
          _this.loadStaAll();
        }
      });
    },
    loadStaAll() {
      this.tableLoading = true;
      var _this = this;
      this.getRequest("/statistics/all/info").then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status === 200) {
          _this.salaries = resp.data;
        }
      })
    },
    emptySalary() {
      this.salary = {
        id: '',
        depName: '',
        peopleCount: '',
        joinCount: '',
        leaveCount: ''
      };
      this.index = 0;
    }
  },
  mounted: function () {
    this.loadStaAll();
    this.initEcharts1();
    setTimeout(() => {
      //这里写执行的语句即可，先让数据库的数据加载进去数组中，再从数组中取值就好了
      this.initEcharts();
    }, 500)
  }
};
</script>
<style>
.el-dialog__body {
  padding-bottom: 10px;
}

.card-panel-num {
  font-size: 20px;
}

.card-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}

.card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
}

.icon {
  width: 5em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.card-panel-icon-wrapper {
  color: #fff;
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}
</style>
